<template>
    <div id="login">
        <div class="backbg"></div>
        <div class="box">
            <div class="logoTitle"><i>三碳平台</i></div>
            <div class="clearfix countBox">
                <div class="leftName">
                    <el-select v-model="role" class="m-2" placeholder="请选择用户类型" size="large" style="float:left;width:100%;margin-bottom:10px">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                    <el-alert title="用户类型不能为空" type="warning" show-icon v-if="commitFlag && role == ''"/>
                </div>
                
                <div class="leftName">
                    <el-input v-model="userName" placeholder="请输入账号" :prefix-icon="User"  size="large"/>
                    <el-alert title="账号不能为空" type="warning" show-icon  style="margin-top:10px" v-if="commitFlag && userName == ''"/>
                    <el-alert title="账号或密码错误" type="warning" show-icon  style="margin-top:10px" v-if="passErrorFlag"/>
                </div>
                <div class="rightPassword">
                    <el-input v-model="passWord" type="password" placeholder="请输入密码" :prefix-icon="Key"  size="large"/>
                    <el-alert title="密码不能为空" type="warning" show-icon  style="margin-top:10px" v-if="commitFlag && passWord == ''"/>
                </div>
                <el-tooltip class="box-item" effect="dark" content="账号：admin，密码：1234qwer" placement="bottom-end" > <el-button style="margin-left:30px" :icon="Finished"  size="large" @click="go">go</el-button> </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
import { User,Key,Finished } from '@element-plus/icons-vue'
import {mapState, mapMutations} from "vuex";
import types from "../store/mutation-types";
export default {
    data(){
        return{
            userName:'',passWord:"",
            User,Key,Finished,
            options:[{value: '1',label: '我是政府角色',},{value: '2',label: '我是公司角色',},{value: '3',label: '我是个人角色',},],
            role:'',
            commitFlag:false,
            passErrorFlag:false,
        }
    },
    
    computed: {
        // 使用对象展开运算符将此对象混入到外部对象中
        ...mapState({
            homePage: 'homePage',
            baseIps:'baseIp',
            basePorts:'basePort',
            baseParse:'baseParse'
        }),
    },
    methods:{
        ...mapMutations({
            // `mapMutations` 也支持载荷:
            setUserType:types.SET_USER_TYPE,
        }),
        go(){
            this.commitFlag = true;
            if(this.userName == 'admin' && this.passWord == '1234qwer'  && this.role != ''){
                this.setUserType(this.role);
                localStorage.setItem("powerSwitchButton", '');
                this.$router.push('/');
            }else if(this.userName != '' && this.passWord != ''&& this.role != ''){
                this.passErrorFlag = true;
            }
        }
    }
}
</script>

<style scoped>
#login{
    width:100%;
    height:100%;
}
.backbg{
    
    width:100%;
    height:100%;
    background: url("../assets/a.png");
    background-size: cover !important;
    background-repeat: round !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.box{
    width:100%;
    height:400px;
    background:rgba(30, 148, 147, 0.6);
    position:fixed;
    top:50%;
    margin-top:-220px;
}
.logoTitle{
    width:100%;
    text-align: center;
    font-size: 72px;
    font-weight: bold;
    color:#fff;
}
.countBox{
    width:1080px;
    margin:auto;
    margin-top:80px
}
.leftName{
    float: left;
    width:260px;
    margin-left: 30px;
    overflow:hidden;
}
.rightPassword{
    float:left;
    width:260px;
    margin-left: 30px;
}
</style>